<template>
	<view :class="{
		'default-btn': props.type === 'default',
		'disabled': props.disabled,
		'plain': props.plain,
		'small': props.size === 'small'
		}"
		@click="handleClick"
	>
		<slot></slot>
	</view>
</template>

<script setup lang="ts">
const emits = defineEmits(['click'])
const props = defineProps({
	disabled: {
		type: Boolean,
		default: false
	},
	type: {
		type: String,
		default: "default"
	},
	plain: {
		type: Boolean,
		default: false
	},
	size: {
		type: String,
		default: "large"
	}
})
const handleClick = () => {
	if (!props.disabled) {
		emits('click')
	}
}
</script>

<style lang="stylus" scoped>
.default-btn
	font-size: 36rpx
	font-weight: 400
	color: #fff
	background-color: #3974df
	width: 100%
	text-align: center
	line-height: 88rpx
	border-radius: 44rpx
	transition: all .3s
.default-btn:active
	background-color: #28539d
.default-btn.plain
	background-color: #fff
	color: #3974df
	border: 1px solid #3974df
	transition: all .3s
.disabled:active
	background-color: #d8d8d8
.default-btn.plain:active
	background-color: #e5e5e5
.disabled
	font-size: 32rpx
	font-weight: 400
	color: #fff
	background-color: #d8d8d8
	width: 100%
	text-align: center
	line-height: 88rpx
	border-radius: 44rpx
.disabled.plain
	color: #5f5f5f
	border: 1px solid #5f5f5f
.small
	width: 70%
	margin: 0 auto
	line-height: 70rpx
	font-size: 30rpx
</style>